<template>
	<view>
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="nav-bar">
			<view class="nav-item" v-for="(item, index) in navItems" :key="index"
				:class="{ active: currentIndex === index }" @click="switchTab(index)">
				{{ item }}
				<view class="active-line" v-if="currentIndex === index"></view>
			</view>
			<!-- <view class="search-icon">
				<uni-icons type="search" size="20"></uni-icons>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				currentIndex: 0,
				navItems: ['首页', ]
			}
		},
		created() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
		},
		methods: {
			switchTab(index) {
				this.currentIndex = index
			}
		}
	}
</script>

<style>
	.status-bar {
		background-color: #fff;
	}

	.nav-bar {
		display: flex;
		padding: 10px 15px;
		border-bottom: 1px solid #eee;
		background-color: #fff;
	}

	.nav-item {
		flex: 1;
		text-align: center;
		font-size: 16px;
		color: #666;
		position: relative;
	}

	.active {
		color: #333;
	}

	.active-line {
		position: absolute;
		bottom: -5px;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		height: 2px;
		background-color: #ff0000;
	}

	.search-icon {
		padding: 0 10px;
	}
</style>